查看原文
其他

空间输入交互设计 - Apple Vision App设计指导(三)

AR圈 2023-10-15

Editor's Note

李康Max是著名的VR产品经理,近期他围绕空间APP的设计撰写了多篇设计指导,这些指导对于VR产品的设计师、应用开发者及空间计算的爱好都很有价值,警长特此转载。

The following article is from 九棱镜的笔记 Author 九棱镜的笔记


大家好,我是李康Max。
本文针对visionOS的特点提供了输入交互设计的指导。融合官方wwdc的视频、Apple 设计文档、我写的XR交互设计基本原理,形成了这篇文章。让大家能够理解visionOS的输入交互有什么,自己做App应该用什么,以及采用这样设计是为什么。本文约7000字,预计阅读时长40分钟,请大家合理安排时间。


一、visionOS可用的交互方式

1.1 现在有哪些输入交互方式?

- 目光瞄准+手势确认 for 远处物体

- 手触摸交互 for 近处物体

- 语音输入 用语音发出命令主动交互

- 键鼠+触控板交互 常用的2D应用交互

- 游戏手柄等外设输入交互

- 目光瞄准➡️意图识别 输入交互

1.2 手眼交互有什么特点

- 私密性强
用户的眼睛是被遮挡起来的,不用担心被现实中其他人看到。因为不提供手柄射线,App也就不能检测用户射线瞄准位置,进一步提升了私密性。

- 舒适度高(自然)
眼睛占人类日常获取信息的83%,当用户想要观察操控一个物体时往往都是目光聚焦到这个物体上。所以用目光作为空间物体选择非常自然。而用户操控空间物体最主要的方式还是手,次要是声音,还有其他表情和肢体等等。所以眼手交互是最自然的交互方式(输入输出),声音是第二自然的输入交互方式。

- 精准度高
据我不标准推算Vision的准度,相当于你日常使用电脑时,可以用眼动追踪取代鼠标。(部分场景不行,例如编辑中文文档精度就达不到,中文的文字密度太高了)。


二、目光交互设计 Eyes Sight
用目光注视的方式锁定空间中目标。

2.1 注意设计的舒适度 Comfortable
- 尽量把窗口放在60度角内,把重要信息放在30度视角内。
根据人因工程学的测算,人仅眼球转动的舒适角度是30度,所以这是用户最舒适的内容获取状态。当内容放置在在30度~60度时,用户轻飘一眼只需要眼球转动,仔细看就需要头部轻微转动。这时候头部依然能够长时间保持。当内容放置在60度~90度,就需要头部较大幅度的转动,用户长时间保持会有颈椎酸痛。当内容放置在90度外用户往往需要躯干转身来操作。


- 在Share Space空间模式,系统会自动规范窗口位置和空间容器位置。
窗口一多用户空间就会变得凌乱,所以系统会设置相应的标准,按照约各占60度等方式进行排布,就像PC桌面分屏一样。

- 在Full Space空间模式,要获取用户头显位置信息来布置内容。
在聚焦模式和VR模式一个app可以独享一个空间,但是用户现实空间被削弱了。所以需要搭建自己的空间,这时候空间原点往往设计为基于用户头显位置推断用户脚底为原点,进行内容设计。(我推测)

- 不要让用户频繁切换窗口深度。
可以通过向后推窗口的方式,让交互元素保持在同一个Z轴距离,就像弹窗。
人眼是根据双目度视差来测绘深度距离的变化。所以相对于角度的偏转,深度每次变化都需要双目理解并且大脑会进行计算,而且在现实空间中,一个物体由远及近和由近及远往往会隐含“攻击”“逃离”的判断,会造成更多的用户情绪波动。所以若非必要尽量减少深度变化。

- 空间布局的窗口和物体 距离用户1米以上
根据我之前的近身操作面板布置基础教程中,在身高170cm的用户,伸手够到的距离为73cm,如果结合用户躯干倾斜,大致就是在1m范围。所以当窗口内容超过1m后,用户就会觉得比较难触碰到,就会优先采用基本手眼交互方式了。

2.2 提升易用性 Easy to use
- 让元素保持圆角设计
人的目光实际上是一个锥体,投射在平面上就是一个圆形,所以圆形图标设计可以更好的和目光契合。visionOS也是这样设计目光投射的光斑的。
另外用户的视线常常会被形状中的角吸引,难以专注到图形的中心。这就导致眼动追踪识别效率降低。

- 让图标的元素在同一个平面上
不要使用阴影偏移3D视图等等,让元素保持在一个平面上。

- 把用户目光引导到元素的中心
所有的图标元素焦点都要放在中心上,减少视觉压力,减少注意力分散,以提升眼动追踪效率。

- 控制最小60pt热区规范 
眼睛实际上很难在一个小物体上持续性聚焦,眼睛比较舒适的最小聚焦范围约2.2度。所以就算Apple Vision眼动追踪精度已经非常高了。用户注意力依旧难以在识别精度上聚焦。所以按钮设计起码要60pt

- 用户明显但不鲜艳或刺眼的提示。
用户对于亮度的变化更为敏感,而颜色的变化更容易挑起用户情绪变化。所以一般而言,用柔和的动态效果、增强的对比度、缩放等变化等技术吸引用户注意,不要使用很多冲突的颜色等。

- 缩放 采用同比缩放 让元素瞄准视角不变 Use dynamic scale for UI
同样的物体在人眼看来是近大远小,我们要看清一个物体实际上是增大这个物体在视野内占得比例。因为UI设计我们图片、文章在窗口中所占的像素比例确定了。当窗口没有按照距离同比放大的情况下被移动到远处,实际窗口的文字变小,阅读效率变差,目光控制功能也会受影响。

- 让UI窗口始终朝向用户
就像你在侧面无法看清电视一样,自己在使用手机时也是手机面向自己。一个倾斜的屏幕会让UI元素变形,同时也会影响目光识别准确度。

2.3 即时反馈 Responsive
设计hover态在上一篇UI设计已经讲了。

2.4 强注视交互 Intentional
- 强注视是目光定位的一种强化状态
一般视觉用于信息获取,当我们目光锁定到一个空间物体时,往往下一步就是产生控制行动。所以在这个期间人们就会了解这是什么?思索可以用来做什么?然后驱动行为去做。而了解这个是什么,就可以加到产品交互中。就像当年PC应用提供的能力一样。

- 强注视反馈设计 take advantage of eye intent
强注视按钮提供名称
强注视菜单展开
强注视语音按钮直接唤起输入
强注视 按钮作为点击



三、非直接手势交互设计 Hands Gestures

3.1 visionOS支持非直接手势 和触碰操作
- 非直接手势
visionOS 默认支持非直接手势,用户通过学习系统提供的基本手势操控,就可以快速立即和熟悉整个平台的交互,降低学习成本。
非直接手势需要借助其他方式获取焦点,现在就是通过目光焦点。使用手势是控制目光焦点所在的位置和元素。例如,用户看向一个button,用手指快速轻点,就等于点击这个button,不用关心手的位置。所以这种非直接手势通常较为简便和舒适。用户可快速看向不同方向,焦点移动灵活,用户的手放在大腿或身侧时也能被捕捉到,操控不用刻意移动胳膊的位置。

- 触碰操作
用户必须将手移动到操控对象上,比较费力,同时操控对象一般都是3D物体,会占据大量视野空间。触碰操作通常用于精度要求不高,但是物理反馈要求明确的元素。例如系统提供的虚拟键盘。

3.2 非直接手势的基本交互手势
- 系统级交互逻辑
系统级交互逻辑其实比较像触摸屏的操作逻辑思路。包含以下6项基本操作。
把非直接手势交互作为整个App的兜底方案,就算触摸操作是你 App 的一项功能,确保用户使用非直接手势也能执行相同功能。

3.3 自定义手势交互 Custom gestures
自定义手势要遵循以下规则:

- 容易学习和操作 Easy to explain and perform
避免创建需要用户使用特定一只手执行的自定义手势,让用户用哪只手会增加负担。
谨慎使用涉及多指或双手的自定义手势。执行自定义手势对用户来说可能有挑战性,要求其同时用多指做出姿势或使用双手可能会更难。
例如,火影里的火遁、水遁的结印,需要经过专业的学习训练才能使用,就不适合。

- 避免手势冲突 Avoid gesture conflicts
避免和系统手势冲突,避免和用户日常手势冲突。例如,双击大拇指和食指是系统事件,而自定义双击大拇指和食指&中指作为自定义手势,就冲突了。

- 舒适且可靠 Comfortable and reliable
用户重复操作不会觉得累,其实让用户举起手臂操作,哪怕只有一会儿也会觉得累。例如,用打响指表示切换下一首歌,遇到个不喜欢的歌单,手指都打歪了。

- 适配每个人 Accessible to everyone
手势交互尽量只使用用户的一只手,以免用户另一只手在忙碌。例如在某hub上学习考研资料,用户桌面上只放一只手。有些人会有管用手,甚至可能受伤有伤不便操作。

- 表述清晰 Unambiguous
不同文化场景下的人,对手势理解可能会不同。
例如手势数字,中国华北地区的7是大拇指食指中指捏合,而粤闽地区普遍是伸出拇指和食指,且食指向下。(在广东的北方人表示很有趣)一个美国人在马路边上举着大拇指,并不是说你车开的很棒,而是需要搭便车。

- 让你的手势可以用简笔图展示
一个都不能通过图形理解的手势,基本就是用户非常难记住的手势了。并且也不利于传播。


3.4 融合目光注视的手势 eyes and intent
- 通过用户目光注视的意图改变手势操作的结果。
例如,现在手机上浏览图片放大时,会按照手位置作为中心点,在visionOS也能实现这个效果。

例如,在无边记中,用户先要移动画笔的位置。可以直接使用目光注视的位置,作为着笔点。


四、触摸交互设计 Direct touch

4.1 触摸的基本手势
直接手势常见用途
轻触直接选择或激活对象。
按住打开关联菜单。
轻触并拖移将对象移到新位置。
轻触两下预览对象或文件;在编辑情境中选择字词。
轻扫显示操作和控件;关闭视图;滚动。
双手捏合并拖移放大或缩小。
双手捏合并沿圆弧拖移旋转对象。


4.2 什么时候用触摸交互
- 符合日常使用习惯 Familiar mechanics
假设你设计的是个音乐学习软件,你向用户现实空间投射一把钢琴,那么用户演奏钢琴就是直接触碰。就是用户在日常生活中用手就可以完成对物体的操控,不需要用视觉反复确认。又如吉他和古筝的演奏。

- 物体需要近距离使用 Inspection and manipulation
例如你是一个医学App,用户需要近距离观察人体器官模型学习。这时候就要放到用户手边,让用户可以移动旋转甚至拆解组合,让用户可以全方位的理解这个物体。
又例如你做的是一个建模软件,用户需要反复的雕刻、填充,创造一个物体模型。那么让用户直接用手捏泥巴就是最自然的状态,当然提供刻刀更优雅一些。

- 物理活动模拟 Physical activity
当你需要用户完成一个物理活动时,往往用户需要借助工具。而工具普遍是拿在手上。例如你做个模拟农场的游戏,用户手上需要拿一把斧子砍树,这时候就可以把斧子绑定在用户手上来砍木头。
亦或者,你做的是个模拟厨房的游戏,需要用户用刀切菜,用勺子和锅炒菜,等等。这就有必要使用直接手势交互了。

4.3 为触摸补充反馈 Provide extensive feedback for direct touch

- 什么是最自然的触摸反馈?
人的皮肤主要有压力感受器,温度感受器,痛觉感受器。通过增加以上感受器的分布密度,并结合人的一般认知,就可以得到材质感受器;经过反复的触摸获得物体的形态,结合人的生活认知就能推断是什么物体。
特别的,手上的触觉感受神经分布更为密集,所以手对压力,温度,材质,痛觉都更加明显。
在此基础上,游戏手柄普遍使用震动模拟压力感受,特别的PICO4使用了宽频马达以更丰富的震动状态提供给用户。在xbox手柄提供trigger键单独的震动反馈,把🤌捏合进行了更细致的划分,在地平线系列游戏中反馈极好。
所以在目前产业发展中,震动反馈是最常用的触摸反馈。
在智能手机快速的发展史中,全键盘物理按键的手机曾红极一时。随着iPhone通过构建视觉+震动+声音的反馈模拟触控,且将输入框放置到紧挨着键盘的方式,取代了物理全键盘。VisionOS的虚拟键盘依旧能看到这种设计思路的延伸。

- 设计成可触碰的物理形态
让按钮像一个按钮,通过暗示其物理结构让按钮符合用户的一般认知。就像visionOS的虚拟键盘,让每个键位浮在键盘底座上,表示这个键位是可以通过按下去触发的。
当你想塞给用户一个触屏的交互,就把它包装成一个Pad 或者锤子的TNT,这样用户就知道自己该上手操作了。


- 视觉光线反馈
其实现实生活中我们用手指去拿起水杯或者手机,在一般光线下都是会有个影子跟随的,也就是影子在协助判断这两个物体在3D空间的距离。当触摸到了皮肤就会变形以扩大和物体的接触面积,实际接触的感受器会变多。
在visionOS中,把手指作为光源,这样就可以通过在物体上光线反射提供如影子一样的距离暗示,提升人对距离的判断效率。同时随着光线变强和光线的遮挡亦能反馈出我是否“抓紧了”的信号。

- 物理状态反馈
被触碰的物体往往会发生型变,根据物体的制作材料和物理结构,型变方式和程度不同。但是如果交互设计中采用了相关结构,就一定要提供灵敏的物理反馈。这个物理反馈不只存在于3D物体上,还存在于3D物体的组成部份中。例如放置了一个飞机模型,那么飞机引擎的旋浆最好是可以被拨动旋转的。

- 声音反馈
物理状态的型变往往会产生震动,而震动就会发出声音。所以现实生活中声音反馈往往是作为一种状态已经改变的信号,所以在触碰一些开关,或者物理碰撞时就要加上声音,声源也要挂载到发声处。
一般情况下,有型变就要有震动,有震动就要有声音。

4.4 触摸交互的物体的放置

- 可触摸的元素一般放在距离用户1m内
因为1米的距离是一般用户刚好伸手就能够到的距离。

- 不要让用户在空间中移动
一般情况是不希望用户移动的,所以触摸模型不要放置太远让用户过去拿。

- 考虑用户不同的姿势
用户可能就是在沙发上半躺着,这时候就不要设计一些非必要的让用户坐直,或者站起来才能做的事儿。

- 参考visionOS虚拟键盘的放置规则
在 visionOS 中,系统提供的虚拟键盘显示在单独的窗口中,可让用户移到任意位置。你无需在布局中考虑键盘的位置。



五、语音交互设计 Voice order

5.1 语音交互前途不可限量
语音交互可以是一种无界面的交互,同时语音交互时常作为一种命令式输入,语音输入往往要考虑使用者的语境。随着当前AI的发展,基于文本对话式服务逐渐被挖掘出来,甚至可以单独作为一种智能系统存在,应用范围不可限量。

5.2 语音交互设计注意
在唤醒上。以前以智能音箱和手机作为语音助手的载体,第一门槛往往是唤醒精度。我就经常听到楼下的小女娃喊“小度小度”。而Vision在用户嘴边放置了6颗麦克风,极大提升了识别效率。
在命令的精准度上。例如现在要操作简单的智能家居,你觉得太冷了想要关一下空调。这时候往往要说“xx,关一下1号卧室的空调”。而当你使用visionOS是就可以直接看一眼空调“关了”,因为visionOS可以判断你的现实环境,这个放在应用中依旧可以。
在处理任务的复杂度上。当前随着chatGPT的发展,AI处理复杂任务的能力已经超过很多普通人。
语音交互缺少私密性。 我们发出的声音会影响周围,在非私密场所语音交互依旧无法成为主流,所以当前Vision 作为空间计算电脑要放到办公环境,语音依旧只能是辅助交互方式。但是用户在自己家里,语音交互已经具备了成为主流交互模式的所有条件。

六、鼠标&触控板 和 键盘 


6.1 鼠标/触控板
- 这是系统级功能,开发者无需操作
在 visionOS 中,用户可以外接指针设备或键盘,并在继续使用其眼睛和手部的同时使用这两种设备。如果用户通过看向元素来聚焦其上,然后移动指针,系统会将焦点从用户看向的元素移至指针下方的元素。

- 交互模式协作:指针目光手势
连接指针设备后,用户看向的区域决定了指针的上下文。例如,当用户的视线从一个窗口移至另一个窗口时,指针的上下文会无缝转换到新窗口。
当用户使用所连接支持手势的指针设备(如触控板或鼠标)时,指针会在用户使用手势时隐藏,从而尽量减少视觉干扰。在这种情形下,指针一直处于隐藏状态,直至用户移动后重新出现在用户看向的位置。

6.2 键盘
- 这是系统级功能,开发者无需操作
visionOS支持纯键盘的交互方式。让用户仅使用键盘即可导航和激活窗口、菜单、控件和系统功能。

- 引导用户使用外接键盘
需要执行输入大量文本的任务(如创建演示文稿)时,或者说产品本身非常依赖键盘组成的快捷键操作,例如命令行。就可以引导用户接入蓝牙键盘。

- 谨慎为用户提供自定义快捷键
自定义快捷键一般比较隐晦,用户学习成本比较高,所以尽量使用系统定义好的快捷键。当必须要提供快捷键时要做好按键冲突预警,禁止和系统快捷键相同的按键,在和其他应用程序冲突时,限制使用范围或者引导更改。


七、游戏手柄 Controller

- visionOS默认支持游戏手柄交互
近几年来App store已经是全球营收最高的游戏平台。所以Apple对于游戏开发和游戏控制器的支持已经做的非常友好。目前支持xbox手柄和ps手柄通过蓝牙连接,甚至你都可以在系统launcher直接使用。visionOS也继承了这种能力。

- 有限制使用游戏手柄
优先考虑让用户也可使用平台的默认输入方式来控制游戏。如果确定有些操作必须要用游戏手柄,App Store 会显示“需要游戏控制器”标记来帮助用户识别,并可能在用户尚未将兼容的游戏控制器与其设备配对时提醒用户。

- 实时检测手柄连接状态和手柄型号
因为用户用户随时可能打开游戏,所以当用户打开应用时要实时监测手柄连接状态,当手柄失联时及时提醒。虽然现在游戏手柄大同小异,但是实际不同平台手柄按键略有不同,且非常影响用户使用,所以当用户连接手柄时,要提供不同手柄型号的按键指向。


- 避免用户反复切换交互方式
如果你的程序支持使用游戏手柄,那就让用户可以通过游戏手柄完成App中所有的交互。避免要求用户切换输入设备。


八、留存问题汇总

- 为什么visionOS选用目光瞄准和手势确认的交互方式
- 为什么visionOS是直屏不用曲屏?
- Vision Pro眼动追踪精度是多少?
- 如何基于眼神的意图进行交互时设计扩展?
- Vision Pro手势识别精度是多少?
- 法师是如何创造法术的?


九、文章说明
- 参考原文
Design for spatial input
https://developer.apple.com/videos/play/wwdc2023/10073/
AppleDesign-Vision-Inputs-Eyes:
https://developer.apple.com/cn/design/human-interface-guidelines/eyes/
AppleDesign-Vision-Inputs-Gestures:
https://developer.apple.com/cn/design/human-interface-guidelines/gestures/
AppleDesign-Vision-Inputs-Keyboard:
https://developer.apple.com/cn/design/human-interface-guidelines/keyboards
AppleDesign-Vision-Inputs-Pointing devices:
https://developer.apple.com/design/human-interface-guidelines/pointing-devices
AppleDesign-Vision-Inputs-Game-controllers:
https://developer.apple.com/design/human-interface-guidelines/game-controllers
VR交互设计原理集合:详见我之前的文章

- 集合说明
关于Apple Vision提供的设计内容,官方给出的信息相对错综复杂。有些分布在WWDC整体介绍中,有些分布在visionOS介绍中,有些分布在Apple汇总设计指导文档中。目前在主动学习状态,我将优先以官方提供原文内容整理汇总,当官方内容结构不合适我就用我的方式展示。本系列不再是原计划的12篇,本篇融合了原计划的4篇为1篇。

- 个人说明
微信公众号:九棱镜的笔记
个人微信:likangmax(添加请说明来意)



您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存